<template>
  <template v-if="user">
    <van-cell title="昵称" is-link @click="toEdit('userName', '昵称',user.userName)"
              :value="user.userName" />

    <van-cell title="账户" is-link :value="user.userAccount" />
    <van-cell title="头像" @click="toEdit('avatarUrl', '头像', user.avatarUrl)" to="/user/edit" is-lk>
      <!--插槽-->
      <img :src="user.avatarUrl" style="height: 48px"/>
    </van-cell>
    <van-cell title="性别" @click="toEdit('gender', '性别', user.gender)" to="/user/edit" is-link  >
      <template v-if="user.gender === 0">
        {{"女"}}
      </template>
      <template v-else>
        {{"男"}}
      </template>
    </van-cell>
    <van-cell title="电话" @click="toEdit('phone', '电话', user.phone)" to="/user/edit" is-link :value="user.phone" />
    <van-cell title="邮箱" @click="toEdit('email', '邮箱', user.email)" to="/user/edit" is-link :value="user.email" />
    <van-cell title="创建时间"  is-link :value="user.createTime" />
  </template>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import myAxios from "../plugin/myAxios";
import {showFailToast} from "vant";
import {getCurrent} from "../services/user";

const router = useRouter();

const toEdit = (currentKey: string, label:string , currentValue: string) => {
  router.push({
    path: '/user/edit',
    query: {"id": user.value.id ,key:currentKey, label: label, value: currentValue}
  })
}

const user = ref();

onMounted(async ()=>{
  // 加载用户个人信息
  const userData = await getCurrent();
  console.log("userData ", userData)
  if (userData) {
    user.value = userData;
  } else {
    showFailToast({message:'用户未登录，请登录！'})
  }

})

</script>

<style scoped>

</style>